<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Hello World!</title>
<style type="text/css">
* {
	/*   border: solid 1px; */
	font-family: 微軟正黑體;
	position: relative;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	/* border-top: solid 20px #214e8c; */
	/* border-bottom: solid 20px #214e8c; */
	box-sizing: border-box;
}

body {
	background-color: #d1d1d1
}

.namecard {
	width: 350px;
	height: 200px;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	background-color: #eee;
	letter-spacing: 1px;
	color: rgba(0, 0, 0, 0.7);
	overflow: hidden;
	border-radius: 6px;
	border-solid: 1px rgba(0, 0, 0, 0.15);
	font-weight: 300;
	box-shadow: 0px 20px 15px -20px rgba(0, 0, 0, 0.2)
}

.namecard h2 {
	font-size: 25px;
	font-weight: 500;
}

.namecard span {
	font-size: 12px;
}

.namecard h5 {
	color: #214e8c;
}

.namecard p {
	font-size: 12px;
	line-height: 22px
}

.circle {
	width: 100px;
	height: 100px;
	border-radius: 100%
}

.circle1 {
	position: absolute;
	right: 100px;
	background-color: #214e8c
}

.circle2 {
	position: absolute;
	width: 60px;
	height: 60px;
	right: -40px;
	top: -40px;
	border: solid 5px #214e8c;
}

/* .mark {
	font-size: 300px;
	position: absolute;
	bottom: 100px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.1);
} */
</style>
</head>
<body>
	<!-- <div class="mark"></div> -->
	<div class="namecard">
		<h2>
			青青螺丝 <span>QingQing</span>
		</h2>

		<h5>address</h5>
		<h5>telephone</h5>
		<hr></hr>
		<p>simple description</p>
		<div class="circle circle1"></div>
		<div class="circle circle2"></div>
	</div>

	<div class="namecard">
		<h2>
			慈力机械<span>cili</span>
		</h2>

		<h5>address</h5>
		<h5>telephone</h5>
		<hr></hr>
		<p>simple description</p>
		<div class="circle circle1"></div>
		<div class="circle circle2"></div>
	</div>
</body>
</html>
